---
section: Sizing
title: Width
slug: /docs/width/
order: 1
---

# Width

Utilities for setting the width of an element.

<carbon-ad />

| React props | CSS Properties   |
| ----------- | ---------------- |
| `w={size}`  | `width: {size};` |

## Auto

Use `w="auto"` to let the browser calculate and select the width for the element. You can use it to unset a specific width:

```jsx
<x.div w={{ xs: 24, md: 'auto' }} />
```

## Screen Width

Use `w="100vw"` to make an element span the entire width of the viewport.

```jsx
<x.div h={12} w="100vw" />
```

## Scaled Width

All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scales between `0` and `1` due to conflicting with fluid range. You have to add a suffix `s` to target values from theme, like `0.5` becomes `0.5s` and `1` becomes `1s`.

```jsx preview color=light-blue
<>
  <template preview>
    <x.div display="flex" flexDirection="column" spaceY={4} mx="auto" w={64}>
      {['1s', 8, 12, 16, 24].map((v) => (
        <x.div key={v} display="flex" alignItems="center" spaceX={4}>
          <x.p fontSize="sm" color="light-blue-600" w={24} textAlign="right">
            w={v}
          </x.p>
          <x.div
            h={8}
            w={v}
            borderRadius="md"
            bg="light-blue-500"
            color="white"
            fontSize="2xl"
            fontWeight="extrabold"
          />
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div>
    <x.div w="1s" />
    <x.div w={8} />
    <x.div w={12} />
    <x.div w={16} />
    <x.div w={24} />
  </x.div>
</>
```

## Fixed Width

Any valid value is accepted in width, numbers are converted to `px`, other units have to be specified.

```jsx preview color=emerald
<>
  <template preview>
    <x.div display="flex" flexDirection="column" spaceY={4} mx="auto" w={64}>
      {[123, '12px', '4rem', '3ex'].map((v) => (
        <x.div key={v} display="flex" alignItems="center" spaceX={4}>
          <x.p fontSize="sm" color="emerald-600" w={24} textAlign="right">
            w={v}
          </x.p>
          <x.div
            h={8}
            w={v}
            borderRadius="md"
            bg="emerald-500"
            color="white"
            fontSize="2xl"
            fontWeight="extrabold"
          />
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div>
    <x.div w={123} />
    <x.div w="12px" />
    <x.div w="4rem" />
    <x.div w="3ex" />
  </x.div>
</>
```

## Fluid Width

Values from `0` to `1` are converted into percentages. As a fraction or a number, both are an expression. Of course specifying `[value]%` is also possible.

```jsx preview color=rose
<>
  <template preview>
    <x.div spaceY={6}>
      {[
        [
          ['1/2', 1 / 2],
          ['1/2', 1 / 2],
        ],
        [
          ['2/5', 2 / 5],
          ['3/5', 3 / 5],
        ],
        [
          ['0.2', 0.2],
          ['0.8', 0.8],
        ],
        [
          ['calc(50% - 40px)', 'calc(50% - 40px)'],
          ['calc(50% + 40px)', 'calc(50% + 40px)'],
        ],
      ].map((v, i) => (
        <x.div
          key={i}
          display="flex"
          borderRadius="md"
          overflow="hidden"
          color="white"
          fontFamily="mono"
        >
          <x.div w={v[0][1]} px={2} py={4} bg="rose-400" textAlign="center">
            w={v[0][0]}
          </x.div>
          <x.div w={v[1][1]} px={2} py={4} bg="rose-500" textAlign="center">
            w={v[1][0]}
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div display="flex">
    <x.div w={1 / 2}>w=1/2</x.div>
    <x.div w={1 / 2}>w=1/2</x.div>
  </x.div>
  <x.div display="flex">
    <x.div w={2 / 5}>w=2/5</x.div>
    <x.div w={3 / 5}>w=3/5</x.div>
  </x.div>
  <x.div display="flex">
    <x.div w={0.2}>w=0.2</x.div>
    <x.div w={0.8}>w=0.8</x.div>
  </x.div>
  <x.div display="flex">
    <x.div w="calc(50% - 40px)">w=calc(50% - 40px)</x.div>
    <x.div w="calc(50% + 40px)">w=calc(50% + 40px)</x.div>
  </x.div>
</>
```

## Responsive

To control the margin of an element at a specific breakpoint, use responsive object notation. For example, adding the property `w={{ md: 1 }}` to an element would apply the `w={1}` utility at medium screen sizes and above.

```jsx
<x.div w={{ xs: 1 / 2, md: 1 }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

## Customizing

### Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the `theme.sizes` section of your theme.

```diffjs
  // theme.js
  export const theme = {
    sizes: {
+     sm: '8px',
+     md: '16px',
+     lg: '24px',
+     xl: '48px',
    },
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme/).
